<template>
  <div class="pageContent">
    <!-- 顶部 -->
    <div class="top flexAround">
      <div class="top_content">
        <div class="top_content_title">在场人数</div>
        <div class="top_content_content">{{this.managerInfo.inNumber}}</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">离场人数</div>
        <div class="top_content_content">{{this.managerInfo.outNumber}}</div>
      </div>
      <div class="top_content">
        <div class="top_content_title">总计人数</div>
        <div class="top_content_content">{{this.managerInfo.personTotal}}</div>
      </div>
    </div>

    <!-- 中间内容 -->
    <div class="content">
      <div class="center flexBetweenCenter">
        <div class="center_title">人员列表</div>
        <div>
          <a-radio-group v-model="radioModel" @change="onChange">
            <a-radio-button value="0">全部</a-radio-button>
            <a-radio-button value="1">在场</a-radio-button>
            <a-radio-button value="2">离场</a-radio-button>
          </a-radio-group>
          <a-input-search
            placeholder="请输入姓名查询"
            style="width: 200px;margin-left:20px"
            v-model="likeFullName"
            @search="onSearch"
          />
        </div>
      </div>
      <!-- 表格 -->
      <div class="atable">
        <a-table :columns="columns" :data-source="data" :pagination="false">
          <span slot="outTime" slot-scope="text, record">
            <span v-if="record.inOutStatus==2">{{text}}</span>
          </span>
          <span slot="action" slot-scope="text, record">
            <a style="color:#1890FF" @click="onEdit(text, record)">详情</a>
          </span>
        </a-table>
      </div>

      <!-- 分页 -->
      <div class="pagination flexBetween">
        <div>共 {{total}} 条记录 第 {{current}} / {{this.configFun.pageNum(Math.ceil((total/pageSize)))}} 页</div>
        <div>
          <a-pagination
            :current="current"
            :page-size-options="pageSizeOptions"
            :total="this.configFun.pageNum(total)"
            show-size-changer
            :pinspector-size="pageSize"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            show-quick-jumper
          >
            <template slot="buildOptionText" slot-scope="props">
              <span>{{ props.value }}条/页</span>
              <!-- <span v-if="props.value === '40'">全部</span> -->
            </template>
          </a-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryManagement } from '@/api/managePeople.js'
import moment from 'moment'
import { log } from 'util'
const columns = [
  { title: '人员编码', dataIndex: 'code', key: 'code', align: 'center' },
  { title: '姓名', dataIndex: 'fullName', key: 'fullName', align: 'center' },
  { title: '岗位', dataIndex: 'postName', key: 'postName', align: 'center' },
  { title: '部门', dataIndex: 'departmentName', key: 'departmentName', align: 'center' },
  { title: '进场时间', dataIndex: 'inTime', key: 'inTime', align: 'center' },
  { title: '离场时间', dataIndex: 'outTime', key: 'outTime', align: 'center', scopedSlots: { customRender: 'outTime' } },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center'
  }
]
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      radioModel: '0',
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      columns,
      data: [],
      managerInfo: [],
      likeFullName: ''
    }
  },
  mounted() {
    this.getTable()
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    moment,
    getTotal(val, current) {
      this.managerInfo = []
      let size = ''
      let page = ''
      if (val) {
        size = val
      } else {
        size = this.pageSize
      }
      if (current) {
        page = current
      } else {
        page = this.current
      }
      // console.log(this.current);
      
      let data = {
        code: '',
        inOutStatus: this.radioModel,
        likeFullName: this.likeFullName,
        orgId: this.userInfo.orgId,
        page: page,
        size: size,
        teamId: ''
      }
      queryManagement(data).then((res) => {
        let data = res.data.data
        // console.log(data)
        // this.managerInfo = data
        // this.managerInfo.personVOList.forEach((item) => {
        //   item.key = item.id
        //   item.inTime = moment(item.inTime).format('YYYY-MM-DD')

        //   if (item.outTime != null) {
        //     item.outTime = moment(item.outTime).format('YYYY-MM-DD')
        //   }
        // })
        // this.data = this.managerInfo.personVOList
        this.total = data.total
        // console.log(Math.ceil(this.total / size));
        // console.log(page);
        // console.log(111111111);
        
        if (Math.ceil(this.total / size) <page) {
          this.current = 1
        } else {
          this.current = page
        }

        this.pageSize = size
        this.getTable()
      })
    },
    getTable() {
      let data = {
        code: '',
        inOutStatus: this.radioModel,
        likeFullName: this.likeFullName,
        orgId: this.userInfo.orgId,
        page: this.current,
        size: this.pageSize,
        teamId: ''
      }
      queryManagement(data).then((res) => {
        let data = res.data.data
        // console.log(data)
        this.managerInfo = data
        this.managerInfo.personVOList.forEach((item) => {
          item.key = item.id
          item.inTime = moment(item.inTime).format('YYYY-MM-DD')

          if (item.outTime != null) {
            item.outTime = moment(item.outTime).format('YYYY-MM-DD')
          }
        })
        this.data = this.managerInfo.personVOList
        this.total = data.total
      })
    },
    onChange(e) {
      // console.log(e.target.value)
      this.current = 1
      // this.pageSize = 10
      this.getTable()
    },
    onSearch(value) {
      // this.current = 1
      // this.pageSize = 10
      // console.log(value)
      this.getTotal()
      // this.getTable()
    },
    onEdit(text) {
      const { href } = this.$router.resolve({
        path: `/personnelInformationManage/${text.id}`,
        query: { id: text.id }
      })

      window.open(href, '_blank')
    },
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      // this.likeFullName=''
      this.current = 1
      this.pageSize = pageSize
      // console.log(pageSize);
      
       this.getTotal(pageSize, this.current)
    },
    pageChange(current, pageSize) {
      // console.log(this.total);
      // console.log(pageSize);
       this.current = current
      this.pageSize = pageSize
      this.getTotal(pageSize, current)
      // console.log(pageSize);

      // console.log(Math.ceil(this.total/pageSize));
      // console.log(current);
    }
  }
}
</script>

<style scoped>
.top {
  text-align: center;
  color: #555;
  margin-bottom: 20px;
  background: #fff;
  padding-top: 40px;
  padding-bottom: 40px;
}
.center {
  margin-bottom: 20px;
}
.content {
  background: #fff;
  /* padding: 15px 30px; */
  margin-bottom: 15px;
  width: 100%;
}
.top_content {
  flex: 1;
  border-right: 1px solid #ededed;
}
.top_content:last-of-type {
  border: none;
}
.top_content_content {
  color: #000;
  font-size: 30px;
  /* font-weight: 600; */
}
.center_title {
  font-size: 16px;
  color: #000;
  font-weight: 600;
  line-height: 100%;
}
.atable {
  margin-bottom: 20px;
}
</style>